<template>
	<view class="release-item-box" @click="caseClick">
		<!-- 顶部头像名称区域 -->
		<view class="user-box">
			<view class="user">
				<u-avatar size="60" :src="itemObj.userInfo.avatar"></u-avatar>
				<text class="u-m-l-20">{{ itemObj.userInfo.nick_name || '' }}</text>
			</view>
			<text>{{ $u.utils.formatDate(itemObj.create_time || Date.parse(new Date())) }}</text>
		</view>
		<!-- 文本内容区域，如果文本内容为空则不显示该区域 -->
		<view class="text-box" v-show="itemObj.content">
			<!-- 文本可展开标签:注 这里阻止点击冒泡的话，点击文字就无法跳转到评论页，不阻止冒泡的话点击“阅读全文”就会触发跳转事件 -->
			<u-read-more ref="uReadMore" :shadow-style="shadowStyle" :toggle="true" close-text="阅读全文" :show-height="114" @tap.stop>
				<rich-text :nodes="itemObj.content" :selectable="true"></rich-text>
			</u-read-more>
		</view>
		<!-- 视频、图片区域,如果视频和图片都没有值则不显示该区域 -->
		<view class="img-box" v-if="itemObj.video_url || itemObj.photo_url.length">
			<!-- 判断是视频还是图片 -->
			<video class="video" v-if="itemObj.video_url" width="100%" height="397rpx" :src="itemObj.video_url" :enable-play-gesture="true" @tap.stop></video>
			<!-- 显示图片 -->
			<view class="img-box u-rela" v-else :style="{ height: getHeight }" @tap.stop>
				<u-image v-for="(img, index) in itemObj.photo_url" :key="index" class="img-item" width="231rpx" height="231rpx" :src="img" @click.stop="imgClick(index)"></u-image>

				<!-- 更多图片按钮图层 -->
				<view v-show="moreNumber > 0" class="more-img u-abso" @click.stop="moreClick">
					<text>+{{ moreNumber }}</text>
				</view>
			</view>
		</view>

		<!-- 底部评论、点赞区域 -->
		<view class="fouter-box">
			<view class="fouter-left-box">
				<!-- 评论区域 -->
				<view class="fouter-item" @click="statusClick">
					<u-icon class="fouter-icon" :color="itemObj.has_comment ? '#00C9B1' : ''" name="chat-fill" size="40"></u-icon>
					<text>{{ itemObj.comment_num || 0 }}</text>
				</view>
				<!-- 观看人数区域 -->
				<view class="fouter-item">
					<u-icon class="fouter-icon" name="eye-fill" size="40"></u-icon>
					<text>{{ itemObj.watch_num || 0 }}</text>
				</view>
				<!-- 点赞区域 -->
				<view class="fouter-item" @click.stop="giveUpClick" v-if="hackReset">
					<u-icon class="fouter-icon" :color="itemObj.has_star ? '#00C9B1' : ''" name="thumb-up-fill" size="40"></u-icon>
					<text>{{ itemObj.has_star ? itemObj.star_num : '点赞' }}</text>
				</view>
			</view>
			<!-- 删除区域:只有订单对象中的 isMe 为 true 才有删除权限 -->
			<view class="fouter-item" @click.stop="deleteBtnClick" v-if="itemObj.lawyer_id === vuex_id ? true : false">
				<u-icon class="fouter-icon" name="trash-fill" size="40"></u-icon>
				<text>删除</text>
			</view>
		</view>
		<!-- 删除帖子的提示 -->
		<delete-model
			:show="delTipModelShow"
			tip="确认删除该帖子吗？"
			cancelText="取消删除"
			confirmText="确认删除"
			@cancel="delTipModelShow = false"
			@confirm="itemDeleteClick"
			@tap.stop
		></delete-model>
	</view>
</template>

<script>
export default {
	props: {
		// 发布人信息对象
		itemObj: {
			type: Object,
			default: function() {
				return {};
			}
		},
		index: {	// 这个值目前仅用于首页，如果这个值是 1 则点赞、删除、等调用的接口不一样
			type: Number,
			default: 0
		},
		isFromComment: {		// 是否是 评论详情页使用此组件
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			// 更多图片的数量
			moreNumber: 0,
			// 决定是否需要显示出更多行的图片,默认自动，如果为 234rpx 则仅能显示一行
			getHeight: '234rpx',
			// 去掉展开更多文本组件的阴影效果
			shadowStyle: {
				backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 100%)'
				// marginLeft: '266rpx',
				// marginTop: '-46rpx'
			},
			// 用于刷新点赞取消点赞的效果
			hackReset: true,
			delTipModelShow: false,
		};
	},
	mounted() {
		if(!this.itemObj.photo_url) return
		// 判断是否需要显示出“更多图片”的组件
		const imgLen = this.itemObj.photo_url.length;
		this.moreNumber = imgLen - 3;
	},
	watch: {
		// 监听 数据项 的变化动态更新 点赞/取消点赞 效果
		itemObj(newOBJ) {
			// console.log('watch');
			this.hackReset = false;
			this.$nextTick(() => {
				this.hackReset = true;
			});
			// this.updataKey += 1;
			// console.log('调用了$nextTick');
			
			// 防止异步数据未填充前页面塌陷问题
			this.$nextTick(() => {
				this.$refs.uReadMore.init();
			});
		}
	},
	methods: {
		// 整个 case 区域的点击事件
		caseClick() {
			let pages = getCurrentPages()
			let page = pages.pop()
			if(page.route == 'myPackageA/pages/views/comment-detail' || page.route == 'myPackageA/pages/views/home-right-order-detail') return	// 如果已经是评论详情页了则就没有这个点击跳转事件了
			if(!this.index) {
				this.$u.route(`/myPackageA/pages/views/comment-detail?case_id=${this.itemObj.id}&index=${this.index}`)
				return
			}
			this.$u.route(`/myPackageA/pages/views/home-right-order-detail?case_id=${this.itemObj.id}&index=${this.index}`)
		},
		// 显示剩余图片按钮的点击事件
		moreClick() {
			this.getHeight = 'auto';
			this.moreNumber = 0;
		},
		// 监听底部图标按钮的点击事件并触发父元素的事件
		// 监听消息按钮的点击事件
		statusClick() {
			this.$emit('statusClick', this.itemObj);
		},
		// 监听点赞按钮的点击事件
		async giveUpClick() {
			if(!this.index) {		// 律师圈
				const res = await this.$u.utils.login();
				// 判断只有res为true时才有点赞的权限
				if (!res) return;
				const res2 = await this.$u.api.orderStar({post_id: this.itemObj.id, star: this.itemObj.has_star ? 0 : 1})
				if(!res2) return
				// 切换提示文字和图标样式
				this.itemObj.has_star = !this.itemObj.has_star
				this.$emit('starClick', this.itemObj.id)
				return
			}	// 以下为 首页的问答咨询接口
			const res = await this.$u.utils.login();
			// 判断只有res为true时才有点赞的权限
			if (!res) return;
			const res2 = await this.$u.api.homeRightOrderStar({post_id: this.itemObj.id, star: this.itemObj.has_star ? 0 : 1})
			if(!res2) return
			// 切换提示文字和图标样式
			this.itemObj.has_star = !this.itemObj.has_star
			this.$emit('starClick', this.itemObj.id)
			
		},
		deleteBtnClick() {
			// 如果是在评论详情页在点击了删除把事件给父组件自己去处理就行
			if(this.isFromComment) return this.$emit('deleteClick', this.itemObj.id)
			this.delTipModelShow = true		// 否则显示删除提示框
		},
		// 监听删除按钮的点击事件
		async itemDeleteClick() {
			const res = await this.$u.api.delCase({ post_id: this.itemObj.id });
			if (!res) return this.$u.toast('删除失败，请稍后重试');
			this.delTipModelShow = false;
			this.$u.toast('帖子删除成功！');
			this.$emit('deleteClick', this.itemObj.id);
		},
		// 图片项的点击事件——预览图片
		imgClick(index) {
			let imgList = [];
			this.itemObj.photo_url.forEach(item => {
				imgList.push(item); // 图片路径需要拼接上服务器根路径
			});
			// console.log(index,imgList);
			uni.previewImage({
				urls: imgList, // 图片列表
				current: index, // 当前显示图片的链接/索引值
				loop: true // 可循环查看图片	
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.release-item-box {
	background-color: white;
	margin-top: 20rpx;
	padding: 20rpx;
	color: #97979f;
	font-size: 28rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	.user-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15rpx 0;
		.user {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #141418;
			font-weight: 700;
			font-size: 30rpx;
		}
	}
	.text-box {
		// margin: 15rpx 0;
		color: #141418;
	}
	.img-box {
		margin: 15rpx 0;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		.video {
			width: 100%;
			// border: 1px dashed #999;
			box-sizing: border-box;
		}
		.img-item {
			// border: 1px dashed #999;
			box-sizing: border-box;
			margin: 3rpx;
		}
	}
	.fouter-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15rpx 0;
		.fouter-left-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			.fouter-item {
				margin-right: 45rpx;
			}
		}
		.fouter-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #97979f;
			.fouter-icon {
				margin-right: 10rpx;
			}
		}
	}
}
.more-img {
	width: 226rpx;
	line-height: 226rpx;
	top: 4rpx;
	right: 13rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	background-color: rgba(0, 0, 0, 0.4);
}
</style>
